<template>  
    <div class="about">  
      <h1>{{ title }}</h1>  
      <p>{{ description }}</p>  
      <button @click="incrementCounter">Click me {{ counter }} times</button>  
    </div>  
  </template>  
    
  <script setup>  
  import { ref } from 'vue';  
    
  // 响应式数据  
  const title = ref('About Page');  
  const description = ref('This is the about page of our application.');  
  const counter = ref(0);  
    
  // 方法  
  function incrementCounter() {  
    counter.value++;  
  }  
  </script>  
    
  <style scoped>  
  .about {  
    text-align: center;  
    padding: 20px;  
  }  
    
  button {  
    margin-top: 20px;  
    padding: 10px 20px;  
    font-size: 16px;  
  }  
  </style>